<script setup lang="ts">
import {
  NButton, NCard, NCheckbox, NCheckboxGroup, NCol,
  NForm, NFormItem, NIcon, NInput, NInputGroup, NLayout, NLayoutContent, NLayoutHeader, NPopconfirm, NRow, NSelect, NTable,
} from 'naive-ui'
</script>

<script lang="ts">
import axios from 'axios'
import imgSrc from './login.jpg'
import input_item from './input_item.json'

const genderOptions = [{
  label: '男性',
  value: '男性',
}, {
  label: '女性',
  value: '女性',
}]

function unitOptions(values) {
  const list = []
  for (const value of values)
    list.push({ label: value, value })
  return list
}

export default {
  data() {
    return {
      imgSrc,
      checkAll: false,
      isIndeterminate: true,
      name: '',
      gender: '',
      age: '',
      female: [],
      cities: [], // 疾病
      symptoms: [], // 症状
      medLists: { 药品类别: [], 药品类型: [], 药品化学名: [] },
      medClasses: [], // 药品类别
      medTypes: [], // 药品类型
      medNames: [], // 药品化学名
      wordStatuses: [], // 文本型生理状态
      medHistory: [], // 病史
      medFamily: [], // 家族病史
      takeMeasures: [], // 已采取措施
      checkedCities: [], // 选中的疾病，默认包含高血压
      checkedSymptom: [], // 选中的症状
      checkedMedClass: [], // 选中的药品类别
      checkedMedType: [], // 选中的药品类型
      checkedMedName: [], // 选中的药品化学名
      checkedWordStatus: [], // 选中的文本型生理状态
      checkedMedHistory: [], // 选中的病史
      checkedMedFamily: [], // 选中的家族病史
      checkedTakeMeasures: [], // 选中的已采取措施
      exclusive: [ // 互斥生理状态
        // ['有残存肾功能', '无残存肾功能'],
        // ['NYHA心功能II级', 'NYHA心功能III级', 'NYHA心功能IV级']
      ],
      checkedExclusive: [], // 选中的互斥文本型生理状态
      // historicals: [], // 既往病史
      // checkedHistoricals: [], // 选中的既往病史
      physicalExamination: {}, // 体格检查
      presentIllness: {}, // 现病史及个人史
      urinalysis: {}, // 尿液检查
      bloodTest: {}, // 血液检查
      ultrasound: {}, // 超声检查
      dynamicBlood: {}, // 动态血压
      ecc: {}, // 心电图及基因检测
      nla: {}, // 无创肢体动脉功能
      otherExamination: {}, // 其他检查
      units: {},
      checkedUnits: {}, // 选中的数值型生理状态单位
      form: {}, // 输入的数值型生理状态
      tableData: [// 用药情况表格
        // {
        //  level: '药品化学名',
        //  name: '替米沙坦',
        //  dose: '20mg',
        //  frequence: '2',
        //  remark: '',
        // },
      ],
      turn: true, // 药品输入的视图
    }
  },
  async mounted() {
    // @release: 进入页面时从后台加载数据
    // var res = await this.$axios.get('/input_item', {})
    let res = { data: input_item }
    if (res.data) {
      res = res.data
      // 处理返回数据
      // console.log(res)
      // console.log(typeof (res))//string
      let units = {}
      // 深拷贝，防止修改原数据
      units = Object.assign(units, res.数值型属性)
      // 获取分类数据
      const testKind = res.数值属性分类
      // 根据分类将类别填入对应对象
      // 保存现病史及个人史
      for (let i = 0; i < testKind['现病史及个人史'].length; i++) {
        const key = testKind['现病史及个人史'][i]
        // 将units中的key-value对应填入对应对象
        this.presentIllness[key] = units[key]
        // 删除units中的key-value对应
        delete units[key]
      }
      // 保存体格检查
      for (let i = 0; i < testKind['体格检查'].length; i++) {
        const key = testKind['体格检查'][i]
        this.physicalExamination[key] = units[key]
        delete units[key]
      }
      // 保存尿液检查
      for (let i = 0; i < testKind['尿液检查'].length; i++) {
        const key = testKind['尿液检查'][i]
        this.urinalysis[key] = units[key]
        delete units[key]
      }
      // 保存血液检查
      for (let i = 0; i < testKind['血液检查'].length; i++) {
        const key = testKind['血液检查'][i]
        this.bloodTest[key] = units[key]
        delete units[key]
      }
      // 保存超声检查
      for (let i = 0; i < testKind['超声检查'].length; i++) {
        const key = testKind['超声检查'][i]
        this.ultrasound[key] = units[key]
        delete units[key]
      }
      // 保存动态血压
      for (let i = 0; i < testKind['动态血压'].length; i++) {
        const key = testKind['动态血压'][i]
        this.dynamicBlood[key] = units[key]
        delete units[key]
      }
      // 保存心电图和基因检测
      for (let i = 0; i < testKind['心电图检测'].length; i++) {
        const key = testKind['心电图检测'][i]
        this.ecc[key] = units[key]
        delete units[key]
      }
      // 保存无创肢体动脉功能
      for (let i = 0; i < testKind['无创肢体动脉功能'].length; i++) {
        const key = testKind['无创肢体动脉功能'][i]
        this.nla[key] = units[key]
        delete units[key]
      }
      // 保存待分类，将units剩余的属性填入其他检查
      this.otherExamination = units
      // 再次获取数据
      units = {}
      units = Object.assign(units, res.数值型属性)
      Object.assign(this.units, units)
      // console.log(this.units)
      // this.units = units
      this.cities = res.疾病
      this.symptoms = res.症状
      // 视图2
      this.medLists.药品类别 = res.药品类别
      this.medLists.药品类型 = res.药品类型
      this.medLists.药品化学名 = res.药品化学名
      // 视图1
      this.medClasses = res.药品类别
      this.medTypes = res.药品类型
      this.medNames = res.药品化学名
      // 接收病史，家族病史，已采取措施
      this.medHistory = res.病史
      this.medFamily = res.家族病史
      this.takeMeasures = res.已采取措施
      // this.wordStatuses = res.文本属性
      // 文本属性删去互斥的字段
      this.exclusive = res.mutual_exclusive
      const sublist = [].concat(...res.mutual_exclusive) // 展平
      // console.log(sublist)
      res['文本属性'].forEach((text) => {
        if (!sublist.includes(text))
          this.wordStatuses.push(text)
      })
      // // 文本属性删掉既往病史
      // const historical = res.label_classification.historical
      // this.historicals = historical
      // res['文本属性'].forEach(text => {
      //   if (sublist.indexOf(text) === -1 && historical.indexOf(text) === -1) { this.wordStatuses.push(text) }
      // })
      this.female = res.label_classification.female
      // 数值型属性删掉年龄
      delete this.units.年龄
      // 初始化空对象{}
      res.mutual_exclusive.forEach((list, index) => {
        this.checkedExclusive[index] = []
      })
      for (const key in this.units) {
        this.checkedUnits[key] = this.units[key][0]
        this.form[key] = ''
      }
      this.checkedUnits = Object.assign({}, this.checkedUnits)
      this.form = Object.assign({}, this.form)
      // console.log(this.checkedUnits, this.form)
    }
  },
  methods: { // 跳转页面
    // handleCheckAllChange (val) {
    //   this.checkedCities = val ? cityOptions : []
    //   this.isIndeterminate = false
    // },
    handleCheckedCitiesChange(value1) {
      const checkedCount = value1.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
      // console.log(value1)
    },
    handleCheckedSymptomChange(value2) {
      const checkedCount = value2.length
      this.checkAll = checkedCount === this.symptoms.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.symptoms.length
      // console.log(value2)
    },
    handleCheckedWordStatusChange(value3) {
      const checkedCount = value3.length
      this.checkAll = checkedCount === this.wordStatuses.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.wordStatuses.length
      // console.log(value3)
    },
    handleCheckedMedTypeChange(value4) {
      const checkedCount = value4.length
      this.checkAll = checkedCount === this.medTypes.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.medTypes.length
      // console.log(value4)
    },
    handleCheckedMedNameChange(value5) {
      const checkedCount = value5.length
      this.checkAll = checkedCount === this.medNames.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.medNames.length
      // console.log(value5)
    },
    handleCheckMedHistoryChange(value6) {
      const checkedCount = value6.length
      this.checkAll = checkedCount === this.medHistory.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.medHistory.length
      // console.log(value6)
    },
    handleCheckMedFamilyChange(value7) {
      const checkedCount = value7.length
      this.checkAll = checkedCount === this.medFamily.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.medFamily.length
      // console.log(value7)
    },
    handleCheckTakeMeasuresChange(value8) {
      const checkedCount = value8.length
      this.checkAll = checkedCount === this.takeMeasures.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.takeMeasures.length
      // console.log(value8)
    },
    handleCheckedMutualChange(e) {
      // console.log(e.target.value)
      console.log(this.checkedExclusive)
    },
    changed(key, value) {
      if (key === 'BMI') {
        this.form['身高'] = ''
        this.form['体重'] = ''
      }
      else {
        const height = parseFloat(this.form['身高'])
        const weight = parseFloat(this.form['体重'])
        // console.log(height, weight)
        if (height > 0 && weight > 0) {
          console.log('计算BMI')
          this.form.BMI = (weight * 100 * 100 / height / height).toFixed(1)
        }
      }
      // console.log(key, this.form[key])
      // console.log(this.checkedUnits)
      // 响应式绑定数据
      this.checkedUnits = Object.assign({}, this.checkedUnits)
      this.form = Object.assign({}, this.form)
    },
    basicChanged(value) {
      console.log(value)
    },
    checkNull() {
      // console.log(this.form)
      const map = {}
      for (const key in this.units) {
        const value = parseFloat(this.form[key]).toFixed(1)
        if (value > 0)
          map[`${key}(${this.checkedUnits[key]})`] = value
      }
      const ageint = parseInt(this.age)
      if (ageint)
        map['年龄(岁)'] = ageint
      // console.log(map)
      return map
    },
    async getResult() {
      // console.log(this.checkedCities, this.checkedSymptom, this.checkedWordStatus, this.form.xjg)
      // const res = await this.$axios.post('/login', {})
      // 从表格数据中获取用药列表
      if (!this.turn) {
        this.tableData.forEach((line) => {
          if (line.level === '药品类型')
            this.checkedMedType.push(line.name)
          else if (line.level === '药品化学名')
            this.checkedMedName.push(line.name)
        })
      }
      const attr = [].concat(...this.checkedExclusive) // 展平
      // var attrList = this.checkedWordStatus.concat(this.checkedHistoricals).concat(attr)
      const attrList = this.checkedWordStatus.concat(attr)
      let textAttr = []
      if (this.gender === '男性') {
        attrList.forEach((item) => {
          if (!this.female.includes(item))
            textAttr.push(item)
        })
      }
      else { textAttr = attrList }
      const doctorPhoneNumber = sessionStorage.getItem('doctorPhoneNumber')
      const params = {
        文本实体: {
          疾病: this.checkedCities,
          症状: this.checkedSymptom,
          药品类型: this.checkedMedType,
          药品化学名: this.checkedMedName,
          文本属性: textAttr,
          病史: this.checkedMedHistory,
          家族病史: this.checkedMedFamily,
          已采取措施: this.checkedTakeMeasures,
          性别: this.gender === '' ? undefined : [this.gender],
          // 姓名: this.name === "" ? undefined : [this.name],
        },
        数值属性: this.checkNull(),
      }
      try {
        console.log(params)
        const response = await axios.post('http://127.0.0.1:8000/convert', { caseData: params, isInfer: true })
        alert('成功')

        console.log(response.data)
      }
      catch (error: any) {
        alert(`失败：${error?.message ?? '未知原因'}`)
      }
      finally {
        this.$emit('close')
      }
    },
    addLine(e) {
      if (this.tableData === undefined)
        this.tableData = []
      this.tableData.push({
        level: '药品化学名',
        name: '',
        dose: '',
        frequence: '',
        remark: '',
      })
    },
    deleteLine(row) {
      const id = this.tableData.indexOf(row)

      console.log(id)
      this.tableData.splice(id, 1)
      // console.log(this.tableData)
    },
    // 按下表单切换按钮
    onTurn() {
      this.turn = !this.turn
      this.checkedMedClass = []
      this.checkedMedType = []
      this.checkedMedName = []
    },
  },
}
</script>

<template>
  <NLayout>
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="">
    </div>
    <NLayoutHeader>
      高血压用药智能辅助决策系统
    </NLayoutHeader>
    <NLayoutContent>
      <br>
      <!-- <n-row type="flex" class="row-bg" justify="start"> -->
      <NRow>
        <NCol :span="24">
          <NCard class="box-card">
            <NForm ref="form" :model="form" label-width="60px">
              <div class="title" style="margin-top:0px">
                基本信息
              </div>
              <NFormItem>
                <!-- <NCol :span="6">
                                    <n-form-item label="姓名">
                                        <n-input placeholder="请输入姓名" v-model:value="name" @update="basicChanged"
                                             style="width:200px"></n-input>
                                    </n-form-item>
                                </NCol> -->
                <NCol :span="6">
                  <NFormItem label="性别">
                    <NSelect
                      v-model:value="gender" placeholder="请选择性别" style="width:200px"
                      :options="genderOptions"
                      @update="basicChanged"
                    />
                  </NFormItem>
                </NCol>
                <NCol :span="6">
                  <NFormItem label="年龄">
                    <NInput
                      v-model:value="age" placeholder="请输入年龄" type="number" style="width:200px"
                      @update="basicChanged"
                    >
                      <template #append>
                        岁
                      </template>
                    </NInput>
                  </NFormItem>
                </NCol>
              </NFormItem>
              <div class="title">
                输入说明
              </div>
              <NFormItem label-width="0px">
                <NRow class="paragraph" />
              </NFormItem>
              <div class="title">
                体格检查
              </div>
              <NFormItem label-width="0px">
                <NRow>
                  <NCol v-for="value, key in physicalExamination" :key="key" :span="8">
                    <NFormItem :label="key" label-width="16em">
                      <NInputGroup>
                        <NInput
                          v-model:value="form[key]" placeholder="请输入" type="number"
                          @update="changed(key, value)"
                        />
                        <NSelect
                          v-model:value="checkedUnits[key]"
                          style="width:16em"
                          :options="unitOptions(value)"
                          @update="changed(key, value)"
                        />
                      </NInputGroup>
                    </NFormItem>
                  </NCol>
                </NRow>
              </NFormItem>
              <!-- <div class="title">现病史及个人史</div>
                            <n-form-item label-width="0px">
                                <NCol :span="8" v-for="value, key in presentIllness" :key="key">
                                    <n-form-item :label="key" label-width="16em">
                                        <n-input placeholder="请输入" v-model:value="form[key]" @update="changed(key, value)"
                                            >>
                                            <template v-if="value.length == 1" >{{ value[0] }}</template>
                                            <n-select v-else v-model:value="checkedUnits[key]"
                                                @update="changed(key, value)" style="width:8em">
                                                <n-option v-for="unit, index in value" :key="index" :label="unit"
                                                    :value="unit"></n-option>
                                            </n-select>
                                        </n-input>
                                    </n-form-item>
                                </NCol>
                            </n-form-item> -->
              <div class="title">
                尿液检查
              </div>
              <NFormItem label-width="0px">
                <NRow>
                  <NCol v-for="value, key in urinalysis" :key="key" :span="8">
                    <NFormItem :label="key" label-width="16em">
                      <NInputGroup>
                        <NInput
                          v-model:value="form[key]" placeholder="请输入" type="number"
                          @update="changed(key, value)"
                        />
                        <NSelect
                          v-model:value="checkedUnits[key]"
                          style="width: 16em" :options="unitOptions(value)"
                          @update="changed(key, value)"
                        />
                      </NInputGroup>
                    </NFormItem>
                  </NCol>
                </NRow>
              </NFormItem>
              <div class="title">
                血液检查
              </div>
              <NFormItem label-width="0px">
                <NRow>
                  <NCol v-for="value, key in bloodTest" :key="key" :span="8">
                    <NFormItem :label="key" label-width="16em">
                      <NInputGroup>
                        <NInput
                          v-model:value="form[key]" placeholder="请输入" type="number"
                          @update="changed(key, value)"
                        />
                        <NSelect
                          v-model:value="checkedUnits[key]"
                          style="width:16em" :options="unitOptions(value)"
                          @update="changed(key, value)"
                        />
                      </NInputGroup>
                    </NFormItem>
                  </NCol>
                </NRow>
              </NFormItem>
              <div class="title">
                超声检查
              </div>
              <NFormItem label-width="0px">
                <NRow>
                  <NCol v-for="value, key in ultrasound" :key="key" :span="8">
                    <NFormItem :label="key" label-width="16em">
                      <NInputGroup>
                        <NInput
                          v-model:value="form[key]" placeholder="请输入" type="number"
                          @update="changed(key, value)"
                        />
                        <NSelect
                          v-model:value="checkedUnits[key]"
                          style="width:16em" :options="unitOptions(value)"
                          @update="changed(key, value)"
                        />
                      </NInputGroup>
                    </NFormItem>
                  </NCol>
                </NRow>
              </NFormItem>
              <!-- <div class="title">动态血压</div>
                            <n-form-item label-width="0px">
                                <NCol :span="8" v-for="value, key in dynamicBlood" :key="key">
                                    <n-form-item :label="key" label-width="16em">
                                        <n-input placeholder="请输入" v-model:value="form[key]" @update="changed(key, value)">>
                                            <template #append>

                                                <template v-if="value.length == 1" >{{ value[0]
                                                    }}</template>
                                                <n-select v-else v-model:value="checkedUnits[key]"
                                                    @update="changed(key, value)" style="width:8em">
                                                    <n-option v-for="unit, index in value" :key="index" :label="unit"
                                                        :value="unit"></n-option>
                                                </n-select>
                                            </template>
                                        </n-input>
                                    </n-form-item>
                                </NCol>
                            </n-form-item> -->
              <div class="title">
                心电图检测
              </div>
              <NFormItem label-width="0px">
                <NRow>
                  <NCol v-for="value, key in ecc" :key="key" :span="8">
                    <NFormItem :label="key" label-width="16em">
                      <NInputGroup>
                        <NInput
                          v-model:value="form[key]" placeholder="请输入" type="number"
                          @update="changed(key, value)"
                        />
                        <NSelect
                          v-model:value="checkedUnits[key]"
                          style="width:16em" :options="unitOptions(value)"
                          @update="changed(key, value)"
                        />
                      </NInputGroup>
                    </NFormItem>
                  </NCol>
                </NRow>
              </NFormItem>
              <div class="title">
                无创肢体动脉功能
              </div>
              <NFormItem label-width="0px">
                <NRow>
                  <NCol v-for="value, key in nla" :key="key" :span="8">
                    <NFormItem :label="key" label-width="16em">
                      <NInputGroup>
                        <NInput
                          v-model:value="form[key]" placeholder="请输入" type="number"
                          @update="changed(key, value)"
                        />
                        <NSelect
                          v-model:value="checkedUnits[key]"
                          style="width:16em" :options="unitOptions(value)"
                          @update="changed(key, value)"
                        />
                      </NInputGroup>
                    </NFormItem>
                  </NCol>
                </NRow>
              </NFormItem>
              <!-- <div class="title">待分类</div>
                            <n-form-item label-width="0px">
                                <NCol :span="8" v-for="value, key in otherExamination" :key="key">
                                    <n-form-item :label="key" label-width="16em">
                                        <n-input placeholder="请输入" v-model:value="form[key]" @update="changed(key, value)" type="number"
                                            >>
                                            <template v-if="value.length == 1" >{{ value[0] }}</template>
                                            <n-select v-else v-model:value="checkedUnits[key]"
                                                @update="changed(key, value)" style="width:8em">
                                                <n-option v-for="unit, index in value" :key="index" :label="unit"
                                                    :value="unit"></n-option>
                                            </n-select>
                                        </n-input>
                                    </n-form-item>
                                </NCol>
                            </n-form-item> -->
              <br>
              <NRow>
                <NCol :span="20">
                  <div class="title" style="margin-top:0px">
                    用药情况
                  </div>
                </NCol>
                <NCol :span="4">
                  <NButton size="small" link style="margin-top: -5px;" @click="onTurn">
                    <NIcon>
                      <!-- <RefreshRight /> -->
                    </NIcon>切换视图
                  </NButton>
                </NCol>
              </NRow>
              <NTable v-show="!turn" style="width: 80%; margin-left:60px" fit>
                <thead>
                  <tr>
                    <th>药品层级</th>
                    <th>药品名称</th>
                    <th>每次服用剂量</th>
                    <th>每日服用次数</th>
                    <th>备注</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(data, index) in tableData" :key="index">
                    <th><NSelect v-model:value="data.level" :options="[{ label: '药品化学名', value: '药品化学名' }]" /></th>
                    <th><NSelect v-model:value="data.name" filterable :options="unitOptions(medLists[data.level])" /></th>
                    <th><NInput v-model:value="data.dose" /></th>
                    <th><NInput v-model:value="data.frequence" /></th>
                    <th><NInput v-model:value="data.remark" /></th>
                    <th>
                      <NPopconfirm
                        style="margin-left:10px;"
                        @positive-click="deleteLine(data)"
                      >
                        <template #trigger>
                          <NButton link size="small">
                            删除
                          </NButton>
                        </template>
                        确定删除该条用药记录吗？
                      </NPopconfirm>
                    </th>
                  </tr>
                </tbody>
              </NTable>
              <NButton v-show="!turn" style="margin-left:60px;width:80%" link @click="addLine">
                <NIcon>
                  <!-- <Plus /> -->
                </NIcon>添加
              </NButton>
              <!-- <n-form-item label="药品类型：" label-width="160px" v-show="turn">
                                <n-select v-model:value="checkedMedType" multiple filterable placeholder="请选择"
                                    style="width:90%">
                                    <n-option v-for="medType in medTypes" :key="medType" :label="medType"
                                        :value="medType">
                                    </n-option>
                                </n-select>
                            </n-form-item> -->
              <NFormItem v-show="turn" label="药品化学名：" label-width="160px">
                <NSelect
                  v-model:value="checkedMedName" multiple filterable placeholder="请选择"
                  style="width:90%"
                  :options="unitOptions(medNames)"
                />
              </NFormItem>
              <div class="title">
                相关评估
              </div>
              <NFormItem label="患病情况：" label-width="140px">
                <NSelect
                  v-model:value="checkedCities" multiple filterable placeholder="请选择"
                  style="width:90%"
                  :options="unitOptions(cities)"
                />
              </NFormItem>
              <NFormItem label="症状：" label-width="140px">
                <NCheckboxGroup v-model:value="checkedSymptom" @update="handleCheckedSymptomChange">
                  <NCheckbox
                    v-for="symptom in symptoms" :key="symptom" :label="symptom"
                    :value="symptom"
                    :disabled="gender == '男性' && female.indexOf(symptom) !== -1 ? true : false"
                  >
                    {{
                      symptom }}
                  </NCheckbox>
                </NCheckboxGroup>
              </NFormItem>
              <NFormItem label="病史：" label-width="140px">
                <NCheckboxGroup v-model:value="checkedMedHistory" @update="handleCheckMedHistoryChange">
                  <NCheckbox
                    v-for="medHistory_item in medHistory" :key="medHistory_item"
                    :label="medHistory_item" :value="medHistory_item"
                    :disabled="gender == '男性' && female.indexOf(medHistory_item) !== -1 ? true : false"
                  >
                    {{
                      medHistory_item
                    }}
                  </NCheckbox>
                </NCheckboxGroup>
              </NFormItem>
              <NFormItem label="家族病史：" label-width="140px">
                <NCheckboxGroup v-model:value="checkedMedFamily" @update="handleCheckMedFamilyChange">
                  <NCheckbox
                    v-for="medFamily_item in medFamily" :key="medFamily_item"
                    :label="medFamily_item" :value="medFamily_item"
                    :disabled="gender == '男性' && female.indexOf(medFamily_item) !== -1 ? true : false"
                  >
                    {{
                      medFamily_item
                    }}
                  </NCheckbox>
                </NCheckboxGroup>
              </NFormItem>
              <NFormItem label="已采取措施：" label-width="140px">
                <NCheckboxGroup
                  v-model:value="checkedTakeMeasures"
                  @update="handleCheckTakeMeasuresChange"
                >
                  <NCheckbox
                    v-for="takeMeasures_item in takeMeasures" :key="takeMeasures_item"
                    :label="takeMeasures_item" :value="takeMeasures_item"
                    :disabled="gender == '男性' && female.indexOf(takeMeasures_item) !== -1 ? true : false"
                  >
                    {{
                      takeMeasures_item
                    }}
                  </NCheckbox>
                </NCheckboxGroup>
              </NFormItem>
              <NFormItem label="其他文本属性：" label-width="140px">
                <NRow>
                  <NCheckboxGroup v-model:value="checkedWordStatus" @update="handleCheckedWordStatusChange">
                    <NCheckbox
                      v-for="wordStatus in wordStatuses" :key="wordStatus" div
                      :label="wordStatus" :value="wordStatus"
                      :disabled="gender == '男性' && female.indexOf(wordStatus) !== -1 ? true : false"
                    >
                      {{
                        wordStatus
                      }}
                    </NCheckbox>
                  </NCheckboxGroup>
                  <div
                    v-for="mutual, index in exclusive" :key="index"
                    @update="handleCheckedMutualChange"
                  >
                    <NCheckboxGroup v-model:value="checkedExclusive[index]" :max="1">
                      <NCheckbox
                        v-for="item in mutual" :key="item" :label="item" :value="item"
                        :disabled="gender == '男性' && female.indexOf(item) !== -1 ? true : false"
                      >
                        {{
                          item }}
                      </NCheckbox>
                    </NCheckboxGroup>
                  </div>
                </NRow>
              </NFormItem>
            </NForm>
          </NCard>
        </NCol>
      </NRow>
      <NButton type="primary" @click="getResult">
        确认提交
      </NButton>
    </NLayoutContent>
  </NLayout>
</template>

<style scoped>
.background {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
}

.front {
    z-index: 1;
    position: absolute;
}

.NLayoutHeader,
.NLayoutFooter {
    background-color: cornflowerblue;
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.NLayoutContent {
    background-position: center !important;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
    text-align: center !important;
    line-height: 10px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.text-wrapper {
    white-space: pre-wrap;
}

.el-checkbox {
    width: 180px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 1375px !important; */
    width: 100% !important;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 20px;
}

.el-slider {
    height: 10px;
}

.title {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: 700;
}

.el-input-group {
    margin-bottom: 20px;
}

.paragraph {
    margin-left: 3em;
    font-weight: 600;
}

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}
</style>
